<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 浮动会造成的问题：1. 父元素高度塌陷 2. 影响后续元素布局 */
        /* 清除浮动 */
        /* 第一种方式 */
        /* 给父元素添加高度属性 */
        /* 第三种方式：给父元素添加overflow:hidden */
        .container {
            width: 500px;
            /* height: 500px; */
            background-color: aquamarine;
            /* overflow: hidden; */
        }
        /* 第四种方式:给父级元素添加after伪元素 */
        .container:after {
            content: "";
            display: block;
            clear: both;
        }
        .box{
             width: 100px;
             height: 100px;
             background-color: blue;
             margin: 5px;
             float: left;
        }
        /* 第二种方式 */
        /* 给后面的元素添加clear属性 */
        .text{
             width: 100px;
             height: 100px;
             background-color: red;
             margin: 5px;
             clear: both;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    <div class="text"></div>

    </div>

</body>
</html>